import React, { memo, useState } from 'react'
import { NavBar, ActionSheet } from 'react-vant';
import { Arrow } from '@react-vant/icons';
import './index.less'


const actions = [{ id: 1, name: '拍照' }, { id: 2, name: '从相册中选择' }]
const actions1 = [{ id: 1, name: '男' }, { id: 2, name: '女' }]
export default memo(function MyInfo(props) {
    const [visible, setVisible] = useState(false)
    const onCancel = () => setVisible(false)
    const [visible1, setVisible1] = useState(false)
    const onCancel1 = () => setVisible1(false)

    return (
        <div className='info'>
            <div className='top'>
                <NavBar
                    title="个人信息"
                    onClickLeft={() => props.history.push('/app/my')}
                />
            </div>
            <div className='but'>
                <div onClick={() => setVisible(true)}>
                    <img src="https://img.yzcdn.cn/vant/cat.jpeg" />
                    <div>
                        {'修改头像'}
                        <Arrow />
                    </div>
                </div>
                <div>
                    <div>等级</div>
                    <div>VIP</div>
                </div>
                <div onClick={() => props.history.push('/my-update-name')}>
                    <div>昵称</div>
                    <div>学员009 <Arrow /></div>
                </div>
                <div onClick={() => setVisible1(true)}>
                    <div>性别</div>
                    <div>女 <Arrow /></div>
                </div>
                <div>
                    <div>绑定手机</div>
                    <div>137888888888</div>
                </div>
                <div onClick={() => props.history.push('/my-update-password')}>
                    <div>修改密码</div>
                    <div><Arrow /></div>
                </div>
            </div>
            <>
                <ActionSheet
                    visible={visible}
                    onCancel={onCancel}
                    actions={actions}
                    onSelect={(val) => console.log(val)}
                    cancelText='取消'
                />
                <ActionSheet
                    visible={visible1}
                    onCancel={onCancel1}
                    actions={actions1}
                    onSelect={(val) => console.log(val)}
                    cancelText='取消'
                />
            </>

        </div>
    )
})
